<!-- home -->
<template>
  <div class="container">
    <van-tabs v-model="active" color="#1989fa" @click="changeTab">
      <van-tab :title="item.dictLabel" :name="item.dictValue" v-for="item in tabsList" :key="item.dictValue"></van-tab>
    </van-tabs>
    <van-list v-model="loading" :finished="finished" finished-text="暂无更多信息" @load="getMyList">
      <van-cell
        :title="item.noticeTitle"
        :label="item.textContent"
        v-for="item in repostList"
        :key="item.noticeId"
        @click="onDetail(item.noticeId)"
      >
        <template> <van-image width="100" height="80" :src="item.noticeImage" /></template>
        <template #extra>
          <div class="cell_time">{{ item.createTime }}</div></template
        >
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { getType, getMyList } from '@/api/news.js'
// 请求接口
export default {
  data() {
    return {
      active: '',
      type: 'ckf_notice_news',
      tabsList: [],
      loading: false,
      finished: true,
      repostList: []
    }
  },
  computed: {
    query() {
      return {
        pageNum: 1,
        pageSize: 5,
        dictType: this.type,
        subType: this.active
      }
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    // 切换tabs时更新数据
    changeTab(name, title) {
      this.getMyList()
    },
    // 初始化 获取二级菜单
    async initData() {
      // 获取咨询/政策天地的内容
      const params = { type: this.type }
      const { data } = await getType(params)
      this.tabsList = data
      this.active = data[0].dictValue
      this.getMyList()
    },
    // 加载资讯列表
    async getMyList() {
      const { data } = await getMyList(this.query)
      this.repostList = data.list
    },
    // 跳转新闻详情
    onDetail(id) {
      this.$router.push(`/news/detail/${id}`)
    }
  }
}
</script>
<style lang="scss" scoped>
body {
  background: #f6f6f6;
}
body {
  background: #f6f6f6;
}
// 溢出省略
.van-cell__label {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cell_time {
  position: absolute;
  bottom: 10px;
  color: #969799;
  font-size: 12px;
}
</style>
